<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <link rel="stylesheet" href="./css/Login.css">
</head>
<body>
        <div class="bigBox">
            <div class="login_register_box">
                <div class="login">
                    <table>
                        <tr><td><h1 class="loginH1">登录</h1></td></tr>
                        <tr>
                            <td><input type="text" class="author iptStyle" placeholder="昵称"></td>
                        </tr>
                        <tr>
                            <td><input type="text" class="userName iptStyle" placeholder="账号"></td>
                        </tr>
                        <tr>
                            <td><input type="password" class="passWord iptStyle" placeholder="密码"></td>
                        </tr>
                        <tr class="loginBtnTr">
                            <td><input type="button" value="登录" class="loginBtn" onclick="loginBtn()"></td>
                        </tr>
                    </table>
               
                </div>
                <div class="leftSpan">
                    <h1 style="color: white;">还未拥有账号？</h1>
                    <span>点击下方按钮，注册一个账号吧！</span> <br>
                    <input type="button" class="goRegisterBtn" value="注册" onclick="goRegisterBtn()">
                </div>
                <div class="rightSpan">
                    <h1 style="color: white;">已拥有账号？</h1>
                    <span>点击下方按钮，快去登录吧！</span> <br>
                    <input type="button" class="goLoginBtn" value="登录" onclick="goLoginBtn()">
                </div>
            </div>

        </div>

        <script src="./index.js"></script>
        <script>
            var dataArr  = JSON.parse(localStorage.getItem('defaultDataArr',defaultDataArr));
            var loginBox = document.getElementsByClassName('login')[0];
            var loginH1  = document.getElementsByClassName('loginH1')[0];
            var author   = document.getElementsByClassName('author')[0];
            var userName = document.getElementsByClassName('userName')[0];
            var passWord = document.getElementsByClassName('passWord')[0];
            var loginBtnText = document.getElementsByClassName('loginBtn')[0];
            author.style.display='none'; //登录不需要昵称先隐藏

            function goLoginBtn(){
                loginBox.style.right='0px';
                loginBox.style.transition='0.8s'    
                author.style.display='none';
                loginH1.innerText='登录';
                loginBtnText.value='登录';
                author.value='';
                userName.value='';
                passWord.value='';
             }
             function goRegisterBtn(){
                loginBox.style.right='400px';
                loginBox.style.transition='0.8s'
                author.style.display='block'; 
                loginH1.innerText='注册';
                loginBtnText.value='注册';
                userName.value='';
                passWord.value='';
             }
             function loginBtn(){
                var messArr=[];
                var registerData  = JSON.parse(localStorage.getItem('registerData'));
                messArr.push(registerData);
                if(loginBtnText.value == '登录'){
                    console.log('login');
                    // console.log(messArr);
                    //没注册
                    let flage=null;
                    for(let i=0;i<dataArr.length;i++){
                        if(dataArr[i].userName==userName.value && dataArr[i].passWord==passWord.value){
                            console.log(dataArr[i]);
                            window.location.href=`./index.html?userName=${dataArr[i].author}`;
                            flage=true;
                            break;
                        }
                    }
                    if(flage!=true){
                        if(messArr[0]==null){
                            alert('账号或密码有误！')
                        }else{
                            if(userName.value!=='' && passWord.value!==''){
                                var obj={
                                userName:userName.value,
                                passWord:passWord.value,
                                }
                                let tempArr=messArr.filter((item)=>{
                                    return item.userName==obj.userName
                                })
                                console.log('tempArr',tempArr);
                                if(tempArr.length>0 && tempArr[0]!==null){
                                    window.location.href=`./index.html?userName=${tempArr[0].author}`;
                                
                                }else{
                                    alert('登录失败，账号或密码有误！！')
                                }
                                console.log(tempArr);
                            }else{
                                alert('登录失败！有字段为空！')
                            }
                        }
                    }
                }else{
                    console.log('register');
                    if(author.value!=='' && userName.value!=='' && passWord.value!==''){
                        let obj={
                            id:null,
                            title:null,
                            content:null,
                            author:author.value,
                            userName:userName.value,
                            passWord:passWord.value,
                            pubulishTime:null
                        }
                        localStorage.clear();
                        localStorage.setItem('registerData', JSON.stringify(obj));
                        alert('注册成功！')
                    }else{
                        alert('注册失败！有字段为空！')
                    }
                }
             }
        </script>
</body>
</html>